<title>SuzumiyaHaruhi 导航</title>
<meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<link rel="shortcut icon" href="https://himg.bdimg.com/sys/portrait/item/pp.1.a3ddae16.aaVVoaDOrGPgaVPxkwN14w.jpg?tt=1597994429974"
 type="image/x-icon" />
<!-- 引入css -->
<!-- 专业icon font -->
<!-- 专业网页动画css -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css">
<!-- fontawesome -->
<link href="https://cdn.bootcdn.net/ajax/libs/fontawesome-iconpicker/3.2.0/css/fontawesome-iconpicker.min.css" rel="stylesheet">
<!-- bootstrap -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"> -->
<!-- element-ui -->
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/theme-chalk/index.min.css" rel="stylesheet">
<!-- layui -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.5/dist/css/layui.css">
<!-- <link rel="stylesheet" href="https://res.layui.com/layui/dist/css/layui.css?t=1620478519412" media="all"> -->

<!-- 音乐播放器样式 -->
<link href="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.css" rel="stylesheet" />
<!-- <link href="./css/SHStyle.css" /> -->
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<!-- 引入看板娘模型 -->
<!-- <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script> 这是可控看板娘-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" />
<!-- https://layer.layui.com/ 专门服务与弹窗的开源组件库-->
<style>
	#ceratetime{animation:change 10s infinite;font-weight:800; }
						@keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66}
</style>
<div id="app">
	<div class="cover" id="particles-js">
		<el-main class="conmain">
			<header id="top">
				<nav class="navbar navbar-default navbar-fixed-top nav-box-shadow" role="navigation">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<a href="javascript:void(0)" class="navbar-brand" v-on:click="reload" title="刷新" v-on:mouseover="faceAddAnimate">
							<el-avatar :size="face_size" class="face-img" src="https://api.yimian.xyz/img?type=head"></el-avatar>
						</a>
					</div>
					<div class="collapse navbar-collapse navbar-right" id="menu">
						<ul class="nav navbar-nav">
							<li><a href="javascript:void(0)"><span id="ceratetime">
										<!-- 此处建站时间 --></span></a></li>
							<li><a href="javascript:void(0)" v-on:click="dialogNotice = true">公告</a></li>
							<li><a href="javascript:void(0)">当前设备：<i :class="agentIcon"></i></a></li>
							<li class="dropdown"> <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">{{name}}&nbsp;&nbsp;<b
									 class="caret"></b>&nbsp;&nbsp;</a>
								<ul class="dropdown-menu">
									<li><a href="javascript:void(0)" data-target="#myModal" data-toggle="modal" id="clik"><i class="el-icon-headset"></i>&nbsp;切换歌单</a></li>
									<li class="divider"></li><!-- v-on:click="openR18" -->
									<li class="disabled"><a href="javascript:void(0)"><i :class="r18Icon"></i>&nbsp;{{r18Menu}}</a></li>
									<li class="divider"></li>
									<li><a href="javascript:void(0)" v-on:click="openSetNickName"><i class="el-icon-edit"></i>&nbsp;修改昵称</a></li>
								</ul>
							</li>
						</ul>
					</div>
				</nav>
			</header>
			<div class="container-fluid">
				<div class="row">
					<!-- 首展示 (轮播&音乐) -->
					<div class="container">
						<div class="row">
							<div :class="{'col-md-10 col-lg-10 col-sm-10 col-xs-10 col-md-push-1 col-lg-push-1 col-sm-push-1 col-xs-push-1':!mobile_flag}"
							 style="padding-top: 65px;height: 100%;">
								<div style="height: 500px;">
									<div class="card-con">
										<el-card class="box-card">
											<div class="text item card-box-shadow-carousel">
												<!-- 走马灯 -->
												<a href="javascript:void(0)" v-on:click="carouselAddAnimate">
													<el-carousel :interval="16000" :height="carouselHei" v-on:change="carChange">
														<el-carousel-item v-for="(item,index) in ReAPIList" :key="index">
															<el-image :src="item" class="carousel-img" fit="cover">
															</el-image>
														</el-carousel-item>
													</el-carousel>
													<div class="row htktContext ">
														<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 text-center" style="height: 0px;">
															<h3 :class="Removemargin" style="text-shadow: gray 3px 3px 3px;">{{hitokototext}}</h3>
														</div>
													</div>
												</a>
											</div>
										</el-card>
									</div>
									<!-- 搜索框 -->
									<div class="baidu-search" style="height: 500px;">
										<div class="BTSearch-container">
											<el-card class="box-card">
												<div class="text item">
													<div class="row">
														<form class="has-feedback" action="https://www.baidu.com/s" method="GET" target="_blank">
															<div class="input-group-lg">
																<input value="" name="wd" type="text" class="form-control BTSearch-input text-center" placeholder="百度搜索" autocomplete="off"/>
															</div>
														</form>
													</div>
												</div>
											</el-card>
											<!-- <el-card class="box-card maptop">
												<div class="text item">
													<div class="row">
														<form class="has-feedback" action="http://clg0.info/search?word=" method="GET" target="_blank">
															<div class="input-group-lg">
																<input value="" name="word" type="text" class="form-control BTSearch-input text-center" placeholder="BT搜索"  autocomplete="off"/>
															</div>
														</form>
													</div>
												</div>
											</el-card> -->
											<div class="container-fluid maptop">
												<div class="row">
													<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 text-center">
														<el-button class="text-center" size="medium" type="warning" icon="el-icon-close" circle v-on:click="clickSearch"></el-button>
													</div>
												</div>
											</div>

										</div>
									</div>
								</div>

								<!-- pc端播放器 autoplay="true"-->

								<meting-js v-if="!mobile_flag" :server="music.server" type="playlist" :id="music.id" volume="0.5" loop="all"
								 order="random" autoplay="true" preload="auto" list-folded="false" theme="#F0B386">
								</meting-js>
							</div>
						</div>


					</div>
				</div>
			</div>
			<!-- end 首展示 -->
			<div class="container-fluid divider-nav">
				<div class="row nav-open">
					<a href="javascript:void(0)" v-on:click="showNav">
						<el-card shadow="hover" style="background: rgba(0, 0, 0, 0.1);border: none;">
							<div class="container text-center">
								<el-tag>
									<i class="fa fa-map-marker"></i>&nbsp;这里是导航区 ( ﹁ ﹁ ) ~→
								</el-tag>
							</div>
						</el-card>
					</a>

				</div>
			</div>
			<!-- 导航区主体 -->
			<div class="container-fluid">
				<div class="row nav-row">
					<div class="nav-content">
						<el-main :class="{'el-main-padding020':mobile_flag}">
							<div :class="{'container':!mobile_flag}">
								<!-- 导航区大卡片 -->
								<el-card>
									<div class="row row-type" v-for="(addressType,index) in addressTypeList">
										<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 nav-title text-center"
											:id="'Animate_'+addressType.name">
											<a href="javascript:void(0)" v-on:click="addAnimate(addressType.name)">
												<el-tag effect="dark" class="nav-tag" :color="addressType.labelColor">{{addressType.label}}
												</el-tag>
											</a>
										</div>
										<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 nav-body"
											style="margin-top: 2.8125rem;">
											<div class="container-fluid">
												<div class="row col-card">
													<!-- tag集合部分 -->
													<div class="col-lg-2 col-md-2 col-sm-3 col-xs-6"
														style="margin-top: 1.25rem;" v-for="(address,index) in addressType.addressList"
														v-if="address.typeId==addressType.id">
														<el-tooltip placement="top-start" effect="light">
															<!-- 预览tip -->
															<div slot="content"><a v-if="address.isRequest"
																	href="javascript:void(0)" class="btn btn-link"
																	v-on:click="openDialogPreview(address.url,address.name)"
																	style="padding: 0;">预览</a>
																<span v-else>{{address.scontent}}</span>
															</div>
															<!-- 单个tag部分 -->
															<a target="_blank" :href="address.url">
																<el-card shadow="hover" style="border-radius: 5rem;">
																	<el-tag style="width: 100%;" class="text-center" :color="addressType.tagColor">
																		<img :src="'https://www.google.cn/s2/favicons?domain='+address.url"
																			style="height: 15px;">
																		<font :color="addressType.labelColor">{{address.name}}</font>
																	</el-tag>
																</el-card>
															</a>
														</el-tooltip>
													</div>
												</div>
											</div>
										</div>
									</div>
								</el-card>
							</div>
						</el-main>
					</div>
				</div>
			</div>
			<!-- mobile端播放器 autoplay="true"-->

			<meting-js v-if="mobile_flag" :server="music.server" type="playlist" :id="music.id" volume="0.5" loop="all" order="random"
			 preload="none" list-folded="false" theme="#F0B386" fixed="true">
			</meting-js>

		</el-main>

		<!-- ---------------------------以下皆为对话框或抽屉----------------------------- -->
		<!-- 公告对话框 -->
		<el-dialog :visible.sync="dialogNotice" :fullscreen="true" :modal="false" :show-close="false" class="dialogNoticecs">
			<div :class="{'container':!mobile_flag}">
				<el-card class="box-card">
					<div slot="header" class="clearfix" style="line-height: 40px;">
						<span>本站公告</span>
						<el-button type="warning" icon="el-icon-circle-close" circle style="float: right;" v-on:click="dialogNotice = false"></el-button>
					</div>
					<div class="text item">
						<div class="row">
							<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 text-center">
								<el-card class="fit-cont border-none Removemargin" shadow="hover">
									<a href="javascript:void(0)" v-on:click="addVisitsAnimate">
										<img id="Visits_pic" class="img-responsive Removemargin" title="访问量" src="https://count.getloli.com/get/@haruhi" />
									</a>
								</el-card>
							</div>
						</div>
						<div class="row maptop" v-for="(item,index) in sundries">
							<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
								<dl class="dl-horizontal">
									<dt>{{item.dt}}</dt>
									<dd>
										<el-input type="textarea" :disabled="true" :rows="5" v-model="item.dd"></el-input>
									</dd>
								</dl>
							</div>
						</div>
					</div>
				</el-card>
			</div>
		</el-dialog>
		<!-- 新用户注意 dialog -->
		<el-dialog title="注意" :visible.sync="dialogVisible" width="90%" :close-on-click-modal="false" :close-on-press-escape="false">
			<div class="row">
				<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
					<div class="container-fluid">
						<b class="text-danger">①</b>本站是一个导航站，仅做整合和简单展示；如果要使用某网站，请打开原站使用。<br />
						<b class="text-danger">②</b>目前处于开发期，每天都有大大小小的更新，所以每次打开页面务必先刷新一次页面（浏览器刷新或点击头像刷新），因为作者更新之后，服务器方（指码云）更新延迟很高<br />
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" v-on:click="dialogVisible = false">了 解</el-button>
			</span>
		</el-dialog>
		<!-- 设置昵称 dialog -->
		<el-dialog title="设置昵称" :visible.sync="dialogNickName" width="90%" :close-on-click-modal="false"
		 :close-on-press-escape="false">
			<div class="row">
				<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
					<input class="form-control text-center" v-model="nickName" placeholder="输入昵称" />
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button v-on:click="dialogNickName = false" size="small">取消</el-button>
				<el-button type="primary" v-on:click="saveNickName" size="small">保存</el-button>
			</span>
		</el-dialog>
		<!-- 开启r18 dialog -->
		<!-- <el-dialog title="开启r18" :visible.sync="dialogr18" width="90%" :close-on-click-modal="false" :close-on-press-escape="false">
			<div class="row">
				<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
					<el-tooltip class="item" effect="dark" content="完整的群名,包括标点或其他符号" placement="top-start">
						<input class="form-control" v-model="r18_key" placeholder="输入群名进行验证" />
					</el-tooltip>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button v-on:click="dialogr18 = false">取消</el-button>
				<el-button type="primary" v-on:click="saveR18">保存</el-button>
			</span>
		</el-dialog> -->
		<!-- R18公告 dialog -->
		<!-- <el-dialog title="R18公告" :visible.sync="dialogr18Msg" width="90%" :close-on-click-modal="false"
		 :close-on-press-escape="false">
			<div class="row">
				<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
					<div class="container-fluid">
						说明：色图不能直接显示在页面上，封号⚠；鼠标悬浮Link上可预览；图片不定期更新<br />
						更新：4月16更新了42张色图(1~42)
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" v-on:click="dialogr18Msg = false">了解</el-button>
			</span>
		</el-dialog> -->
		<!-- 磁力链抽屉 -->
		<!-- <el-drawer :title="'所有磁力：'+MagnetList.length+'条'" :visible.sync="drawerMagnet" direction="rtl" size="70%">
			
			<div class="container-fluid">
				<div class="row">
					<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
						<table class="table table-border table-hover table-bg table-sort text-center" style="table-layout:fixed">
							<thead>
								<tr>
									<th class="text-center col-md-2 col-lg-2 col-sm-2 col-xs-2">录入时间</th>
									<th class="text-center col-md-5 col-lg-5 col-sm-5 col-xs-5">磁力链</th>
									<th class="text-center col-md-3 col-lg-3 col-sm-3 col-xs-3">备注</th>
									<th class="text-center col-md-1 col-lg-1 col-sm-1 col-xs-1">大小</th>
									<th class="text-center col-md-1 col-lg-1 col-sm-1 col-xs-1">车牌</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(magnet,index) in MagnetList">
									<td class="fontsize14">{{magnet.createDate}}</td>
									<td>
										<el-main class="Removepadding"><input class="form-control" v-model="magnet.mlink" />
										</el-main>
									</td>
									<td class="fontsize14">{{magnet.info}}</td>
									<td class="fontsize14">{{magnet.size}}</td>
									<td class="fontsize14">{{magnet.mNumbre}}</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</el-drawer> -->
		<el-drawer title="歌单整理" :visible.sync="drawerPlayLlis" direction="btt" size="55%">
			<div class="container-fluid">
				<div class="row">
					<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
						<el-tag size="small" effect="dark">
							<i class="fa fa-music"></i>&nbsp;歌单总数：{{PlayList.length}}
						</el-tag>
					</div>
				</div>
				<div class="row row-playlist">
					<div v-for="(play,index) in PlayList" class="col-md-4 col-lg-3 col-sm-6 col-xs-12 form-inline " :title="play.title"
					 style="margin-top: 20px;">
						<div class="form-group input-group">
							<span class="input-group-addon" :title="play.server">
								<img :src="'https://www.google.cn/s2/favicons?domain='+play.icon" height="15" />
							</span>
							<input type="text" class="form-control" v-model="play.PLID" style="width: 100%;">
							<span class="input-group-addon">
								<b>{{play.info}}</b>
							</span>
						</div>
					</div>
				</div>
			</div>
		</el-drawer>
		<!--fade 淡入淡出 切换歌单对话框 -->
		<div class="modal fade" id="myModal" aria-labelledby="myModallabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h5 class="modal-title" id="myModallabel">切换歌单</h5>
					</div>
					<form id="formData" class="form-horizontal">
						<div class="modal-body">
							<div class="form-group">
								<label class="control-label col-lg-2">平台：</label>
								<div class="col-lg-9">
									<select class="form-control" v-model="newMusic.server" >
										<option v-for="(serv,index) in mServerList" :value="serv.scode">{{serv.label}}</option>
									</select>
									</br>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-lg-2">歌单ID：</label>
								<div class="col-lg-9">
									<el-tooltip placement="top-start">
										<div slot="content"><a target="_blank" href="./HelperPage/GetPlayListId.html" class="btn btn-link" style="color: gainsboro;">如何获取歌单ID</a><br />ID只能是纯数字</div>
										<input type="text" placeholder="请仔细哦！输错了不会显示播放器(平台和Id对应)~" v-model="newMusic.id" name="dir" class="form-control"
										 oninput="value=value.replace(/[^\d]/g,'')">
									</el-tooltip>

								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button class="btn btn-default pull-left btn-sm" type="button" :data-dismiss="isCloseMM" v-on:click="savaMusic(true)">默认歌单</button>
							<button class="btn btn-default pull-left btn-sm" type="button" v-on:click="drawerPlayLlis = true">歌单整理</button>
							<button class="btn btn-default" type="button" data-dismiss="modal">取消</button>
							<button id="savaMusic" class="btn btn-success" type="button" :data-dismiss="isCloseMM" v-on:click="savaMusic(false)">确认</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		<!-- 返回顶部 -->
		<a href="#top" class="back-to-top">
			<div class="el-backtop" style="right: 40px;bottom: 40px;" title="返回顶部">
				<i class="el-icon-caret-top"></i>
			</div>
		</a>
	</div>
</div>
<!-- jquery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- axios -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- bootstrap -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script> -->
<!-- element ui -->
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/index.min.js"></script>
<!-- layer -->
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.3.0/layer.min.js"></script>
<!-- <script src="https://res.layui.com/layui/dist/layui.js?t=1620478519412"></script> -->
<!-- fontawesome 专业图标 -->
<script src="https://cdn.bootcdn.net/ajax/libs/fontawesome-iconpicker/3.2.0/js/fontawesome-iconpicker.min.js"></script>
<!-- 看板娘（不可控） -->
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
<!-- 音乐播放器 -->
<script src="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

<!-- 本站js -->
<script src="./js/SHScript.js"></script>
<script language="javascript">
	function show_date_time() {
		window.setTimeout("show_date_time()", 1000);
		BirthDay = new Date("04-12-2021 20:42:00"); //建站日期
		today = new Date();
		timeold = (today.getTime() - BirthDay.getTime());
		sectimeold = timeold / 1000
		secondsold = Math.floor(sectimeold);
		msPerDay = 24 * 60 * 60 * 1000
		e_daysold = timeold / msPerDay
		daysold = Math.floor(e_daysold);
		e_hrsold = (daysold - e_daysold) * -24;
		hrsold = Math.floor(e_hrsold);
		e_minsold = (hrsold - e_hrsold) * -60;
		minsold = Math.floor((hrsold - e_hrsold) * -60);
		seconds = Math.floor((minsold - e_minsold) * -60);
		ceratetime.innerHTML = daysold + "天" + hrsold + "小时" + minsold + "分" + seconds + "秒";
	}
	show_date_time();
</script>
<script src="./js/particles.js"></script>
<!-- 本站样式 -->
<link href="./css/SHStyle.css" rel="stylesheet" />
